<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class="active"
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class="active"
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="home-content-container fade-in-down-animation">
    <ul class="home-article-list">
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/15/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTML&CSS/">
                        前端基础知识体系-HTML&amp;CSS
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        HTML如何理解语义化？
让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

默认情况下，哪些标签式块级元素？哪些式内联元素？
块级：div h1 table ul ol p ……
内联：span img input button …...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Thu Apr 15 2021 16:55:34 GMT+0800">2021-04-15</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/HTML/">HTML</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/CSS/">CSS</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/15/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTML&CSS/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/14/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/">
                        前端基础知识体系
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        总览
这就是一张图片😂，主要包括了css、js、http以及开发运行环境，具体的见分解的文章。



                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Wed Apr 14 2021 14:05:17 GMT+0800">2021-04-14</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/14/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/11/Vue3.0%E4%B9%8B%E5%88%9D%E8%AF%86%E6%96%B0%E7%89%B9%E6%80%A7%E5%8F%8ACompiler/">
                        Vue3.0之初识新特性及Compiler
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        Vue3.0变化
性能提升1.3 - 2x


1.1 优化案例1

静态Node不再做更新处理（hoistStatic &#x3D;&gt; SSR优化）
静态绑定class、id不再做更新处理
结合打包标记patchFlag，进行更新分析（动态绑...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Sun Apr 11 2021 16:13:27 GMT+0800">2021-04-11</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/Vue3-0/">Vue3.0</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/11/Vue3.0%E4%B9%8B%E5%88%9D%E8%AF%86%E6%96%B0%E7%89%B9%E6%80%A7%E5%8F%8ACompiler/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/09/%E6%B5%85%E8%AF%9DJavaScript%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/">
                        浅话JavaScript内存分配
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        堆、栈、队列数据结构层面堆堆是一种经过排序的树形数据结构，每个节点都有一个值，通常我们所说的堆的数据结构是指二叉树。

栈
栈是限定仅在表尾进行插入和删除操作的线性表。我们把允许插入和删除的一端称为栈顶，另一端称为栈底，不含任何数据元素的栈称为空栈。...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Fri Apr 09 2021 14:52:03 GMT+0800">2021-04-09</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E5%86%85%E5%AD%98/">内存</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/09/%E6%B5%85%E8%AF%9DJavaScript%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/08/%E6%B5%85%E8%AF%9D%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event%20Loop%EF%BC%89/">
                        浅话事件循环（Event Loop）
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        概述首先，我们需要明确：

JS是单线程（single threaded）运行的（所以无论同步还是异步都需要排队）。
异步(asynchronous)要基于回调（callback）来实现。
event loop就是异步回调的实现原理。

🚨 Not...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Thu Apr 08 2021 23:48:12 GMT+0800">2021-04-08</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/08/%E6%B5%85%E8%AF%9D%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event%20Loop%EF%BC%89/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/04/06/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81/">
                        防抖与节流
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        防抖一个事件在触发后，设置定时器，若n秒内该事件没有再次发生，那么执行这个函数，如果n秒内该事件再次发生了，那么定时器重新开始计时。
应用
scroll事件（资源的加载）
mousemove事件（拖拽）
resize事件（响应式布局样式）
keyup...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Tue Apr 06 2021 20:35:46 GMT+0800">2021-04-06</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/04/06/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/03/28/new&create/">
                        new&amp;create
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        我们总能看见如下代码：
12const obj = new Object()const obj = Object.create(null)

那么new和create具体是怎么实现的呢？
new使用new调用函数，或者说发生构造函数的调用时，会执行如...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Sun Mar 28 2021 15:22:06 GMT+0800">2021-03-28</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/03/28/new&create/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/03/12/call&apply&bind%20copy/">
                        call&amp;apply&amp;bind
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        概述
call、apply、bind这三个方法属于显示绑定，这三个方法都能修改this的指向。

call和apply相对比较特殊，他们在修改this指向的同时，还会执行方法；但是bind在修改this后会返回一个待执行的方法。

call和appl...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Fri Mar 12 2021 20:35:46 GMT+0800">2021-03-12</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/03/12/call&apply&bind%20copy/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/02/20/%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E5%85%A8%E5%B1%80Loading/">
                        封装一个全局Loading
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        
由于平时工作过程中使用element ui等比较多，所以这种插件就没有怎么动手做过。懒的同时，也显示出基础十分薄弱，没有深入思考过Vue.use()到底要做什么。

Vue.use(plugin)
安装插件。

参数1&#123;Object | ...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Sat Feb 20 2021 17:56:05 GMT+0800">2021-02-20</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/Vue/">Vue</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/02/20/%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E5%85%A8%E5%B1%80Loading/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
            <li class="home-article-item">

                

                <h3 class="home-article-title">
                    <a href="/2021/02/12/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/">
                        前端缓存策略
                    </a>
                </h3>

                <div class="home-article-content markdown-body">
                    
                        
通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。——Chrome官方

一个...
                    
                </div>

                <div class="home-article-meta-info-container">
    <div class="home-article-meta-info">
        <span><i class="fas fa-history"></i>&nbsp;<span class="home-article-date" data-date="Fri Feb 12 2021 17:22:14 GMT+0800">2021-02-12</span></span>
        
            <span class="home-article-category"><i class="fas fa-folder"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                        </li>
                    
                    
                </ul>
            </span>
        
        
            <span class="home-article-tag">
                <i class="fas fa-tags"></i>&nbsp;
                <ul>
                    
                        <li>
                            
                            <a href="/tags/%E6%80%A7%E8%83%BD/">性能</a>&nbsp;
                        </li>
                    
                        <li>
                            | 
                            <a href="/tags/%E7%BC%93%E5%AD%98/">缓存</a>&nbsp;
                        </li>
                    
                </ul>
            </span>
        
    </div>

    <a href="/2021/02/12/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/">阅读全文&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

            </li>
        
    </ul>

    <div class="home-paginator">
        <div class="paginator">
    
        <a class="prev btn"
           href="/page/2/"
        >上一页</a>
    

    
        <a class="next btn"
           href="/page/4/"
        >下一页</a>
    
</div>

    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>





<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
